<template>
   <div class="qtlist">
       <h4>质检员列表</h4>
       <div class="filter-box" style="padding: 30px;
                background: #fff;
                border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
                    <div>
                            <div class="demo-input-suffix" style="width:300px;display:inline-block;">
                                真实姓名：
                                <el-input
                                    placeholder="请输入姓名"
                                    v-model="input2" class="filter-input">
                                </el-input>
                            </div>
                            <div class="demo-input-suffix" style="width:300px;display:inline-block;">
                                联系方式：
                                <el-input
                                    placeholder="请收入手机号"
                                    v-model="input2" class="filter-input">
                                </el-input>
                            </div>
                        
                            <div class="demo-input-suffix" style="width:300px;display:inline-block;">
                                所属站点：
                                <el-select v-model="value1" placeholder="请选择">
                                        <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                </el-select>
                            </div>
                           
                              <el-button type="primary">搜索</el-button>
                        </div>
                      
        
       </div>
       <div class="container" style="border-radius: 0 0 5px 5px ">
            
            <el-table v-loading="loading" :data="data" border style="width: 100%" ref="multipleTable" stripe>
                 <el-table-column type="index"  width="80" label="序号" align="center"></el-table-column>
                 <el-table-column prop="realName" label="真实姓名" width="140" align="center">
                </el-table-column>
                <el-table-column prop="tel" label="联系方式" width="180" align="center"></el-table-column>
                 <el-table-column prop="belongSite" label="所属站点" align="center" width="240">
                </el-table-column>
                 <el-table-column prop="status" label="认证状态" align="center" width="240">
                </el-table-column>
                <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit()">详情</el-button>
                    <el-button size="mini" type="warning" @click="forbidden()">禁用</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(2)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
             <div class="pagination">
                <el-pagination  background  layout="prev, pager, next" :total="1000" style="text-align:left;">
                </el-pagination>
           </div>
      </div>
  </div>  
</template>

<script>
export default {
    data(){
        return {
          loading:true,
           data: [
                {
                    realName:'王富贵',
                    tel:'15225550038',
                    belongSite:'江苏盱眙',
                    status:'已认证'
                },
                {
                     realName:'王富贵',
                    tel:'15225550038',
                    belongSite:'江苏盱眙',
                    status:'已认证'
                },
                {
                    realName:'王富贵',
                    tel:'15225550038',
                    belongSite:'江苏盱眙',
                    status:'已认证'
                },
                {
                    realName:'王富贵',
                    tel:'15225550038',
                    belongSite:'江苏盱眙',
                    status:'已认证'
                }
           ],
           options: [{
            value: '选项1',
            label: '黄金糕'
            }, {
            value: '选项2',
            label: '双皮奶'
            }, {
            value: '选项3',
            label: '蚵仔煎'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
        value1: '',
        input2:''
      
        }
    },
    methods:{
      formatter(row, column){
        return row.address
      },
      // 禁用
      forbidden(){
          this.$confirm("确认禁用质检员信息？", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
             this.$message({
                    type: 'success',
                    message: '禁用成功!'
            });

         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: '已取消禁用'
              });  
         }) 
      },
      // 删除
     handleDelete(id){
          this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
             this.$message({
                    type: 'success',
                    message: '删除成功!'
            });

         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: '已取消删除'
              });  
         }) 
      },
       //  详情
     handleEdit(){
          let id = 1;
          this.$router.push({
              path:`/qtlist/qt_detail/${id}`
          })
     }
  },
   

 }
</script>
<style  scoped>
.qtlist {
        width:100%;
        height: 100%;
}
.qtlist h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}

</style>